<template>
  <a-drawer :visible="visible" :width="300" title="应用配置" unmount-on-close @cancel="cancel">
    <a-space direction="vertical">
      <a-alert type="warning">
        配置之后仅是临时生效，要想真正作用于项目，点击下方的 "保存配置" 按钮，将配置替换到 缓存 中即可。
      </a-alert>
      <a-divider orientation="center">系统主题</a-divider>
      <a-row justify="center">
        <a-color-picker v-model="settingsStore.theme" hide-trigger show-history show-preset @change="handleColorChange" />
      </a-row>
      <a-divider orientation="center">界面显示</a-divider>
      <a-descriptions :align="{ value: 'right' }" :column="1" :value-style="{ paddingRight: 0 }">
        <a-descriptions-item label="深色菜单">
          <a-switch v-model="settingsStore.sideTheme" checked-value="dark" unchecked-value="light" />
        </a-descriptions-item>
      </a-descriptions>
      <a-descriptions :align="{ value: 'right' }" :column="1" :value-style="{ paddingRight: 0 }">
        <a-descriptions-item label="动态标题">
          <a-switch v-model="settingsStore.dynamicTitle" @change="dynamicTitleChange" />
        </a-descriptions-item>
      </a-descriptions>
      <a-descriptions :align="{ value: 'right' }" :column="1" :value-style="{ paddingRight: 0 }">
        <a-descriptions-item label="版权显示">
          <a-switch v-model="settingsStore.copyright" @change="dynamicTitleChange" />
        </a-descriptions-item>
      </a-descriptions>
    </a-space>
    <template #footer>
      <a-button long shape="round" style="margin: 0" type="primary" @click="save">保存配置</a-button>
    </template>
  </a-drawer>
</template>

<script lang="ts" setup>
import useAppStore from "@/store/modules/app";
import useSettingsStore from "@/store/modules/settings";
import useColorTheme from "@/hooks/useColorTheme";
import defaultSettings from "@/settings";
import { Message } from "@arco-design/web-vue";
import { useDynamicTitle } from "@/utils/dynamicTitle";

const appStore = useAppStore();
const settingsStore = useSettingsStore();
const storeSettings = computed(() => settingsStore);

const visible = computed(() => appStore.globalSettings);
const cancel = () => {
  appStore.setGlobalSettings(false);
};
const save = () => {
  const settings: any = useStorage<LayoutSetting>("layout-setting", defaultSettings);
  settings.value.sidebarLogo = storeSettings.value.sidebarLogo; // logo
  settings.value.dynamicTitle = storeSettings.value.dynamicTitle; // 动态标题
  settings.value.sideTheme = storeSettings.value.sideTheme; // 侧边栏主题
  settings.value.theme = storeSettings.value.theme; // 主题颜色
  settings.value.mode = storeSettings.value.mode; // 暗黑 明亮
  settings.value.copyright = storeSettings.value.copyright; // 版权显示
  appStore.setGlobalSettings(false);
  Message.success("配置已保存");
};
const { updateThemeColor } = useColorTheme();
const handleColorChange = (color: string) => {
  updateThemeColor(color);
};
const dynamicTitleChange = () => {
  // 动态设置网页标题
  useDynamicTitle();
};
</script>

<style lang="less" scoped>
.fixed-settings {
  position: fixed;
  top: 280px;
  right: 0;

  svg {
    font-size: 18px;
    vertical-align: -4px;
  }

  .arco-drawer-footer > .arco-btn {
    margin-left: 0;
  }
}

:deep(.arco-descriptions-item-label-block) {
  color: var(--color-text-1);
}

.layout-text {
  font-size: 12px;
  text-align: center;
  color: var(--color-text-2);
  margin-top: 4px;
}
</style>
